<template>
  <view>
    <u-navbar
      title="确认订单"
      placeholder
      bgColor="transparent"
      :autoBack="true"
    >
    </u-navbar>
    <view class="address">
      <view class="flex align-item_center" @click="route_address">
        <image
          style="margin-right: 30rpx"
          class="wh48"
          src="https://test.uaima.cn/public/static/product/map.png"
        ></image>
        <view v-if="notAddress" class="dotAddress">添加地址</view>
        <view v-else class="addressInfo">
          <view>{{ address.realName }} {{ address.phone }} </view>
          <view class="omit1"
            >{{ address.cityDetail }}{{ address.detail }}</view
          >
        </view>
      </view>
      <view>
        <u-icon name="arrow-right" size="21rpx" color="#333333"></u-icon>
      </view>
    </view>
    <view class="productDetails">
      <view class="page-cart-item" v-for="(item, index) in list" :key="item.id">
        <view class="page-cart-item-info w-full">
          <u--image
            :showLoading="true"
            radius="8rpx"
            :src="isCardProduct ? item.productInfo.image : item.storeInfo.image"
            width="220rpx"
            height="220rpx"
          ></u--image>
          <view class="page-cart-item-info-right w-full ml-20">
            <view class="page-cart-item-info-right-title">
              {{
                isCardProduct
                  ? item.productInfo.storeName
                  : item.storeInfo.storeName
              }}
            </view>
            <view class="page-cart-item-info-right-doc">
              {{
                isCardProduct
                  ? item.productInfo.storeName
                  : item.storeInfo.storeName
              }}
            </view>
            <view class="page-cart-item-info-right-price">
              <view>
                <text style="font-size: 24rpx">￥</text>
                <text>
                  {{
                    isCardProduct
                      ? item.productInfo.price
                      : item.storeInfo.price
                  }}
                </text>
              </view>
              <u-number-box
                v-model="item.cartNum"
                @change="(val) => changeCartNum(val, item)"
              >
                <view slot="minus" class="minus"> - </view>
                <view slot="plus" class="plus"> + </view>
              </u-number-box>
            </view>
          </view>
        </view>
      </view>
      <!-- 	<view style="padding: 0 18rpx;">
				<u-gap height="2rpx" bgColor="#F4F4F4"></u-gap>
			</view> -->
      <!-- <view class="productDetailsFoot" style="padding: 0 18rpx;">
				<u-gap height="31rpx"></u-gap>
				<view class="flex align-item_center justify-content_space-between">
					<view class="font-medium text-30 c_181818">商品金额</view>
					<view class="medium text-30 c_181818">￥</view>
				</view>
			</view> -->
      <!-- <u-gap height="26rpx"></u-gap> -->
    </view>
    <view class="remarks border-box">
      <view class="text-30 font-medium c_181818 ml-18">备注</view>
      <u--textarea
        v-model="remark"
        border="none"
        class="text-30 font-medium c_181818"
        placeholder="请输入备注"
      ></u--textarea>
    </view>
    <u-gap height="260rpx"></u-gap>
    <view class="foot">
      <view class="left"> 待支付￥{{ totalPrice }} </view>
      <view class="payBtn" @click="route_payment"
        >立即支付￥{{ totalPrice }}</view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notAddress: true,
      quantity: 0,
      remark: "",
      address: {},
      loadOption: {},
      list: [],
      totalPrice: "0.00",
    };
  },
  onLoad(option) {
    this.loadOption = option;
    if (this.loadOption.type === "2") this.productsDetail();
    else this.cartList();
  },
  mounted() {
    this.confirmOrder();
  },
  computed: {
    isCardProduct() {
      return this.loadOption.type === "1";
    },
  },
  onShow() {
    this.addressDefault();
  },
  methods: {
    changeCartNum(val, item) {
      this.$iApi
        .cartChangeNum({
          id: item.id,
          number: val.value,
        })
        .then((res) => {
          this.confirmOrder();
        });
      // this.list[index].cartNum = val.value
    },
    cartList() {
      this.$iApi
        .cartList({
          ids: this.loadOption.ids,
        })
        .then((res) => {
          this.list = res.data.valid;
        });
    },
    addressDefault() {
      this.$iApi.addressDefault().then((res) => {
        if (res.data?.id) this.notAddress = false;
        else this.notAddress = true;
        this.address = res.data;
      });
    },
    productsDetail() {
      this.$iApi.productsDetail(this.loadOption.id).then((res) => {
        this.list = [
          {
            ...res.data,
            cartNum: 1,
          },
        ];
        this.calculatePrice();
      });
    },
    confirmOrder() {
      let cartIds = this.list.map((val) => val.id).join(",");
      console.log(cartIds);
      this.$iApi
        .confirmOrder({
          cartId: cartIds,
        })
        .then((res) => {
          console.log(res);
          this.$iApi
            .computedOrder(res.data.orderKey, {
              addressId: res.data.addressInfo.id,
              shipping_type: 1,
              payType: "weixin",
              useIntegral: 0,
              couponId: 0,
              pinkId: 0,
              combinationId: 0,
            })
            .then((ret) => {
              console.log("订单详情", ret);
              this.totalPrice = ret.data.result.totalPrice;
            });
        });
    },
    route_payment() {
	  let cartIds = this.list.map((val) => val.id).join(",");
      this.$iApi
        .confirmOrder({
          cartId: cartIds,
        })
        .then((res) => {
          console.log(res);
          this.$iApi.createOrder(res.data.orderKey, {
			addressId: res.data.addressInfo.id,
			bargainId: 0,
			combinationId: 0,
			couponId: 0,
			from: 'routine',
			mark: this.remark,
			payType: 'weixin',
			phone: res.data.systemStore.phone,
			pinkId: 0,
			realName: res.data.systemStore.name,
			seckillId: 0,
			shippingType: 1,
			useIntegral: 0,
			isChannel: 1,
			storeId: res.data.systemStore.id
		  }).then((res) => {
            console.log(res);
          });
        });

      // uni.navigateTo({
      // 	url: "/pages/product/payment"
      // })
    },
    route_address() {
      uni.navigateTo({
        url: "/pages/user/address",
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.wh48 {
  $wh: 48rpx;
  width: $wh;
  height: $wh;
}

.address {
  width: 690rpx;
  height: 158rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin: 30rpx auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .addressInfo {
    width: 520rpx;

    view:first-child {
      font-weight: 500;
      font-size: 30rpx;
      color: #181818;
    }

    view:last-child {
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      margin-top: 8rpx;
    }
  }

  .dotAddress {
    font-weight: 400;
    font-size: 32rpx;
    color: #28ba54;
  }
}

.productDetails {
  width: 690rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: 30rpx auto 0;

  .page-cart-item {
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    padding: 24rpx 18rpx 30rpx;

    &-info {
      display: flex;
      align-items: center;
      flex-direction: row;

      &-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;

        &-title {
          font-weight: 500;
          font-size: 30rpx;
          color: #151515;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          width: 100%;
        }

        &-doc {
          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
          margin-top: 20rpx;
        }

        &-price {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 500;
          font-size: 32rpx;
          color: #ed7b42;
          margin-top: 20rpx;

          .minus {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            font-size: 40rpx;
          }

          .plus {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 40rpx;
            background: #67b609;
          }

          ::v-deep .u-number-box {
            background: #f7fbf3 !important;
            border-radius: 200rpx;

            .u-number-box__input {
              background: #f7fbf3 !important;
            }
          }
        }
      }
    }
  }
}

.remarks {
  width: 690rpx;
  padding: 30rpx 0rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  margin: 20rpx auto 0;
}

.foot {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17rpx 30rpx;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom); //兼容IOS<11.2
  padding-bottom: env(safe-area-inset-bottom); //兼容 I0S>11.2

  .left {
    font-weight: 600;
    font-size: 30rpx;
    color: #ed7b42;
  }

  .payBtn {
    text-align: center;
    width: 400rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: #67b609;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
  }
}
</style>
